import React from 'react';
import style from './style.css'
import Modal from 'antd-mobile/lib/Modal'
import Button from 'antd-mobile/lib/Button'
import Filter from "./Filter";
import PullMore from "../../component/pullMore";
import {getPageScroll, uuid} from "../../util/uitls";
import Map from 'lodash.map'
import Item from "./item";
import InfiniteScroll from 'react-infinite-scroll-component';
import {Link} from 'react-router-dom'

class InfiniteScrollPage extends React.Component {
    constructor(props) {
        super()
        this.state = {
            modal_down: false,
            modal_center: false,
            modal_up: false,
            refreshing: false,
            list: props.store.InfiniteScroll.imageList,
            hasMore: true
        }
    }

    componentDidMount() {
        document.body.scrollTop = this.props.store.InfiniteScroll.scrollTop - 20
    }


    refresh() {

    }

    fetchData(params) {
        var self = this
        setTimeout(() => {
            var _list = [];
            for (var i = self.state.list.length + 1; i < self.state.list.length + 6; i++) {
                _list.push(i)
            }
            self.state.list = self.state.list.concat(_list)
            self.setState({list: self.state.list})
            self.props.setImageList({imageList: self.state.list})
            if (self.state.list.length > 10) {
                self.setState({hasMore: false})
            }
        }, 1000)
    }

    render() {
        var self = this
        cc({length: this.state.list.length, scrollTop: this.props.store.InfiniteScroll.scrollTop})
        return (
            <div className={style.Test}>
                <div>
                    <Button onClick={() => {
                        self.setState({modal_down: true})
                    }}>上面弹出框
                    </Button>
                </div>
                <div>
                    <button onClick={() => {
                        self.setState({modal_center: true})
                    }}>中间弹出框
                    </button>
                </div>
                <div>
                    <button onClick={() => {
                        self.setState({modal_up: true})
                    }}>下面弹出框
                    </button>
                </div>
                <Modal
                    popup
                    visible={this.state.modal_down}
                    onClose={() => {
                        self.setState({modal_down: false})
                    }}
                    animationType="slide-down"
                >
                    <Filter/>
                </Modal>

                <Modal
                    popup
                    visible={this.state.modal_up}
                    onClose={() => {
                        self.setState({modal_up: false})
                    }}
                    animationType="slide-up"
                >
                    <Filter/>
                </Modal>

                <Modal
                    transparent
                    className={style.centerModal}
                    wrapClassName={style.wrapClassNameCenterModal}
                    visible={this.state.modal_center}
                    onClose={() => {
                        self.setState({modal_center: false})
                    }}
                >
                    <Filter/>
                </Modal>

                <div>
                    <h1>无限加载</h1>
                    <InfiniteScroll
                        onScroll={() => {
                            self.props.setImageList({scrollTop: getPageScroll()[1]})
                        }}
                        initialScrollY={this.props.store.InfiniteScroll.scrollTop}
                        dataLength={this.state.list.length} //This is important field to render the next data
                        next={this.fetchData.bind(this)}
                        hasMore={this.state.hasMore}
                        loader={<h4 style={{textAlign: 'center'}}>加载ing...</h4>}
                        endMessage={
                            <p style={{textAlign: 'center'}}>
                                <b>我也是有底线的</b>
                            </p>
                        }
                        // below props only if you need pull down functionality
                        // refreshFunction={this.refresh}
                        // pullDownToRefresh
                        /*  pullDownToRefreshContent={
                              <h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
                          }*/
                        releaseToRefreshContent={
                            <h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
                        }>
                        {this.state.list.map(item => {
                            return <Link to={"/router-test/index2"}
                                         key={uuid()}
                            >
                                <div style={{height: "100px"}}>
                                    {item}
                                </div>
                            </Link>
                        })}
                    </InfiniteScroll>
                </div>
            </div>
        );
    }
}

import {connect} from 'react-redux'

export default connect(function (state) {
    return {store: state}
}, function (dispatch) {
    return {
        setImageList(payload) {
            return dispatch({type: "InfiniteScroll/setImageList", payload})
        }
    }
})(InfiniteScrollPage);